<template>
  <div class="SearchPage">
    <div class="header">
      <div style="width: 100%;display: flex;justify-content: space-between;">
        <h3>
          HIIC科技信息智能检索
        </h3>
        <el-button 
          type="primary" 
          icon="el-icon-house" 
          circle
          style="background-color: #1890ff;border: 0;"
          @click="$router.push('HomePage')"
        >
        </el-button>
      </div>
    </div>
    <div class="SearchBody" style="margin: 20px 0 0 20%;">
      <div>
        <span>当前位置:</span>
        <el-button type="text" style="margin-left: 10px;">资源搜索</el-button>
      </div>
      <div>
         <el-input placeholder="请输入内容" v-model="searchInput" class="input-with-select" style="width: 50%;">
           <template slot="append">
             <el-button type="primary" class="btn">搜索</el-button>
           </template>
        </el-input>
        <el-button 
          type="text" 
          style="margin-left: 10px;"
          @click="openSearch = !openSearch"
        >
          高级搜索
        </el-button>
      </div>
      <div style="margin-top: 30px;">
        <el-tabs v-model="activeName">
          <el-tab-pane label="人才" name="1">
            <div style="display: flex;">
              <div
                v-show="openSearch"
                class="advancedSearch"
                style="flex: 1;padding-right: 10px;"
              >
                <div
                  style="display: flex;justify-content: space-between;"
                >
                  <span style="fontSize: 16px;">高级检索</span>
                  <el-button
                    type="text" 
                    style="margin-left: 10px;padding: 0;"
                    @click="openSearch = !openSearch"
                  >
                    收起
                  </el-button>
                </div>
                <p>姓名</p>
                <div>
                  <el-tag
                    v-show="nameArray.length > 0"
                    v-for="(item,index) in nameArray"
                    :key="index"
                    style="margin: 0 5px 15px 0;"
                    effect="dark"
                    size="mini"
                    closable
                    @close="handleClose(item,'name')"
                  >
                    {{ item }}
                  </el-tag>
                  <div 
                    v-if="nameVisible"
                    style="color: #6c6c6c;"
                    @click="handleNameText"
                  >
                    请输入姓名
                  </div>
                  <el-input 
                    v-else
                    v-model="nameInput"
                    ref="nameInput"
                    placeholder="请输入并按enter键进行添加" 
                    @keyup.enter.native="handleNameInput"
                    @blur="handleNameInput"
                  >
                  </el-input>
                </div>
                <p>所在地</p>
                <div>
                  <el-tag
                    v-show="locationArray.length > 0"
                    v-for="(item,index) in locationArray"
                    :key="index"
                    style="margin: 0 5px 15px 0;"
                    effect="dark"
                    size="mini"
                    closable
                    @close="handleClose(item,'location')"
                  >
                    {{ item }}
                  </el-tag>
                  <div 
                    v-if="locationVisible"
                    style="color: #6c6c6c;"
                    @click="handleLocationText"
                  >
                    <i
                     class="el-icon-plus" 
                     style="fontWeight: 600;"
                    ></i>
                    所在地
                  </div>
                  <div v-else>
                    <el-select
                      v-model="locationInput"
                      filterable
                      allow-create
                      default-first-option
                      ref="locationInput"
                      placeholder="请输入并按enter键进行添加"
                      @change="handleLocationInput"
                      @keyup.enter.native="handleLocationInput"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <p>就职公司</p>
                <div>
                  <el-tag
                    v-show="companyArray.length > 0"
                    v-for="(item,index) in companyArray"
                    :key="index"
                    style="margin: 0 5px 15px 0;"
                    effect="dark"
                    size="mini"
                    closable
                    @close="handleClose(item,'company')"
                  >
                    {{ item }}
                  </el-tag>
                  <div 
                    v-if="companyVisible"
                    style="color: #6c6c6c;"
                    @click="handleCompanyText"
                  >
                    <i
                     class="el-icon-plus" 
                     style="fontWeight: 600;"
                    ></i>
                    就职公司
                  </div>
                  <div v-else>
                    <el-select
                      v-model="companyInput"
                      filterable
                      allow-create
                      default-first-option
                      ref="companyInput"
                      placeholder="请输入并按enter键进行添加"
                      @change="handleCompanyInput"
                      @keyup.enter.native="handleCompanyInput"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <p>领域标签</p>
                <div>
                  <el-tag
                    v-show="industryChainArray.length > 0"
                    v-for="(item,index) in industryChainArray"
                    :key="index"
                    style="margin: 0 5px 15px 0;"
                    effect="dark"
                    size="mini"
                    closable
                    @close="handleClose(item,'industryChain')"
                  >
                    {{ item }}
                  </el-tag>
                  <div 
                    v-if="industryChainVisible"
                    style="color: #6c6c6c;"
                    @click="handleIndustryChainText"
                  >
                    <i
                     class="el-icon-plus" 
                     style="fontWeight: 600;"
                    ></i>
                    产业链环节
                  </div>
                  <div v-else>
                    <el-select
                      v-model="industryChainInput"
                      filterable
                      allow-create
                      default-first-option
                      ref="industryChainInput"
                      placeholder="请输入并按enter键进行添加"
                      @change="handleIndustryChainInput"
                      @keyup.enter.native="handleIndustryChainInput"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div style="margin-top: 15px;">
                  <el-tag
                    v-show="skillsLabelArray.length > 0"
                    v-for="(item,index) in skillsLabelArray"
                    :key="index"
                    style="margin: 0 5px 15px 0;"
                    effect="dark"
                    size="mini"
                    closable
                    @close="handleClose(item,'skillsLabel')"
                  >
                    {{ item }}
                  </el-tag>
                  <div 
                    v-if="skillsLabelVisible"
                    style="color: #6c6c6c;"
                    @click="handleSkillsLabelText"
                  >
                    <i
                     class="el-icon-plus" 
                     style="fontWeight: 600;"
                    ></i>
                    技能标签
                  </div>
                  <div v-else>
                    <el-select
                      v-model="skillsLabelInput"
                      filterable
                      allow-create
                      default-first-option
                      ref="skillsLabelInput"
                      placeholder="请输入并按enter键进行添加"
                      @change="handleSkillsLabelInput"
                      @keyup.enter.native="handleSkillsLabelInput"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <p>最高学历</p>
                <div>
                  <el-tag
                    v-show="educationArray.length > 0"
                    v-for="(item,index) in educationArray"
                    :key="index"
                    style="margin: 0 5px 15px 0;"
                    effect="dark"
                    size="mini"
                    closable
                    @close="handleClose(item,'education')"
                  >
                    {{ item }}
                  </el-tag>
                  <div 
                    v-if="educationVisible"
                    style="color: #6c6c6c;"
                    @click="handleEducationText"
                  >
                    <i
                     class="el-icon-plus" 
                     style="fontWeight: 600;"
                    ></i>
                    最高学历
                  </div>
                  <div v-else>
                    <el-select
                      v-model="educationInput"
                      filterable
                      allow-create
                      default-first-option
                      ref="educationInput"
                      placeholder="请输入并按enter键进行添加"
                      @change="handleEducationInput"
                      @keyup.enter.native="handleEducationInput"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <p>本科入学年份</p>
                <div style="fontSize:13px;color: #6c6c6c;">
                  <span>{{yearValue[0]}}</span>
                  <span style="margin: 0 30px;">-</span>
                  <span>{{yearValue[1]}}</span>
                </div>
                <div id="enrollmentYear" style="width: 290px; height: 80px;"></div>
                <div>
                  <el-slider
                    v-model="yearValue"
                    style="margin: 0 10px;"
                    range
                    :min="1930"
                    :max="2021">
                  </el-slider>
                  <div>
                  <div style="display: flex;justify-content: space-between;">
                    <span>{{yearValue[0]}}</span>
                    <span>{{yearValue[1]}}</span>
                  </div>
                  </div>
                </div>
                <p>毕业院校</p>
                <div>
                  <el-tag
                    v-show="williamsCollegeArray.length > 0"
                    v-for="(item,index) in williamsCollegeArray"
                    :key="index"
                    style="margin: 0 5px 15px 0;"
                    effect="dark"
                    size="mini"
                    closable
                    @close="handleClose(item,'williamsCollege')"
                  >
                    {{ item }}
                  </el-tag>
                  <div 
                    v-if="williamsCollegeVisible"
                    style="color: #6c6c6c;"
                    @click="handleWilliamsCollegeText"
                  >
                    <i
                     class="el-icon-plus" 
                     style="fontWeight: 600;"
                    ></i>
                    毕业院校
                  </div>
                  <div v-else>
                    <el-select
                      v-model="williamsCollegeInput"
                      filterable
                      allow-create
                      default-first-option
                      ref="williamsCollegeInput"
                      placeholder="请输入并按enter键进行添加"
                      @change="handleWilliamsCollegeInput"
                      @keyup.enter.native="handleWilliamsCollegeInput"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div style="flex: 4;">
                 <ul class="talentsUl" >
                  <li v-if="btnList.location">
                    <span>所在地: </span>
                    <el-button 
                      type="text"
                      v-for="(item, index) in btnList.location" 
                      :key="index"
                      @click="handleLocation(item.name)"
                    >
                      {{item.name}}(<span>{{item.num}}</span>)
                    </el-button>
                  </li>
                  <li v-if="btnList.territory">
                    <span>领域: </span>
                    <el-button 
                      type="text"
                      v-for="(item, index) in btnList.territory" 
                      :key="index"
                      @click="handleTerritory(item.name)"
                    >
                      {{item.name}}(<span>{{item.num}}</span>)
                    </el-button>
                  </li>
                  <li v-if="btnList.year">
                    <span>出生年份: </span>
                    <el-button 
                      type="text"
                      v-for="(item, index) in btnList.year" 
                      :key="index"
                      @click="handlerYear(item.name)"
                    >
                      {{item.name}}(<span>{{item.num}}</span>)
                    </el-button>
                  </li>
                  <li v-if="btnList.educationBackground">
                    <span>最高学历: </span>
                    <el-button 
                      type="text"
                      v-for="(item, index) in btnList.educationBackground" 
                      :key="index"
                      @click="handleEducationBackground(item.name)"
                    >
                      {{item.name}}(<span>{{item.num}}</span>)
                    </el-button>
                  </li>
                </ul>
                <div style="width: 80%;margin: 20px 0;display: flex;justify-content: space-between;">
                  <span style="color: #8c8c8c;vertical-align: middle;">共搜索到8人</span>
                  <el-button type="primary" @click="dialogVisible = true">搜索结果分析</el-button>
                </div>
                <ul class="CharacterUl">
                  <li 
                    v-for="(item, index) in CharacterList" 
                    :key="index"
                  >
                    <div 
                      class="detailLeft" 
                      :style="`background-image: url(${item.img})`"
                      @click="handleDetail(item.id)"
                    >
                    </div>
                    <div class="detailRight">
                      <p>
                        <span style="fontWeight: 600;color: #000;margin-right: 5px;">{{item.name}}</span>
                        <span>{{item.nameDetail}}</span>
                      </p>
                      <p>
                        {{item.site}}
                      </p>
                      <p>
                        <span style="margin-right:10px;">领英:</span>
                        <span>{{item.url}}</span>
                      </p>
                      <div>
                        <el-tag 
                          v-for="(items, index) in item.tag1" 
                          :key="index" 
                          size="mini" 
                          style="margin-right: 5px;"
                        >
                          {{items}}
                        </el-tag>
                      </div>
                      <div>
                        <el-tag
                          v-for="(items, index) in item.tag2" 
                          :key="index"
                          type="info" 
                          size="mini" 
                          style="margin-right: 5px;"
                        >
                          {{items}}
                        </el-tag>
                      </div>
                    </div>
                  </li>
                </ul>
                <div style="width: 80%;text-align: right;margin: 50px 0;">
                  <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="page"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="total">
                  </el-pagination>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="产业" name="2" disabled></el-tab-pane>
          <el-tab-pane label="机构" name="3" disabled></el-tab-pane>
          <el-tab-pane label="区域" name="4" disabled></el-tab-pane>
          <el-tab-pane label="政策" name="5" disabled></el-tab-pane>
          <el-tab-pane label="设施" name="6" disabled></el-tab-pane>
          <el-tab-pane label="技术" name="7" disabled></el-tab-pane>
          <el-tab-pane label="产品" name="8" disabled></el-tab-pane>
          <el-tab-pane label="项目" name="9" disabled></el-tab-pane>
          <el-tab-pane label="投资" name="10" disabled></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="50%"
      style="padding: 0;"
    >
      <div slot="title">
        <h3>地域分布</h3>
      </div>
      <div style="color: #000;">
        <div style="width: 99%;margin-left: 10px;height: 400px;background-color:#fff;"></div>
        <h3 style="margin: 20px 0">标签分布</h3>
        <div style="width: 99%;margin-left: 10px;height: 400px;background-color:#fff;"></div>
        <h3 style="margin: 20px 0">公司分布</h3>
        <div style="width: 99%;margin-left: 10px;height: 400px;background-color:#fff;"></div>
        <h3 style="margin: 20px 0">年龄分布</h3>
        <div style="width: 99%;margin-left: 10px;height: 400px;background-color:#fff;"></div>
        <h3 style="margin: 20px 0">学历与国家分布</h3>
        <div style="width: 99%;margin-left: 10px;height: 400px;background-color:#fff;"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data(){
    return{
      searchInput: '',
      activeName: '1',
      page: 1,
      total: 4,
      openSearch: false,
      nameVisible: true,
      nameInput: '',
      nameArray: [],
      locationVisible: true,
      locationInput: '',
      locationArray: [],
      companyVisible: true,
      companyInput: '',
      companyArray: [],
      industryChainVisible: true,
      industryChainInput: '',
      industryChainArray: [],
      skillsLabelVisible: true,
      skillsLabelInput: '',
      skillsLabelArray: [],
      educationVisible: true,
      educationInput: '',
      educationArray: [],
      williamsCollegeVisible: true,
      williamsCollegeInput: '',
      williamsCollegeArray: [],
      yearValue: [1930,2021],
      dialogVisible: false,
      btnList: {
        location: [
          {name: '全部', num: 8},
          {name: '美国', num: 3},
          {name: '香港特别行政区', num: 2},
          {name: '台湾', num: 1},
          {name: '德国', num: 1},
          {name: '瑞典', num: 1},
        ],
        territory: [
          {name: '全部', num: 8},
          {name: '半导体', num: 2},
          {name: '电器/电子制造', num: 2},
          {name: '互联网', num: 1},
          {name: '保险', num: 1},
          {name: '无线通讯', num: 1},
          {name: '计算机阮籍', num: 1},
        ],
        year: [
          {name: '全部', num: 8},
          {name: '80s', num: 5},
          {name: '70s', num: 3},
        ],
        educationBackground: [
          {name: '全部', num: 8},
          {name: '博士', num: 5},
          {name: '硕士', num: 2},
          {name: '学士', num: 1},
        ],
      },
      CharacterList: [
        {
          id: 1,
          img: 'https://img0.baidu.com/it/u=3980991598,1158945621&fm=26&fmt=auto&gp=0.jpg',
          name: 'MEE Hao',
          nameDetail: 'Ehisj Hskjdf Hoiej',
          site: '美国 加利福利亚州 米尔艾范德萨',
          url: 'https://www.baidu.com',
          tag1: ['HIC','ACD/CVD',"C++/JAVA/JAVASCRIPT/PHTYHON/CAD","UFC/UFS"],
          tag2: ['dfslkajllsf skdfjds', 'derver']
        },
        {
          id: 2,
          img: 'https://img1.baidu.com/it/u=359192533,1392216207&fm=26&fmt=auto&gp=0.jpg',
          name: 'MEE Hao',
          nameDetail: 'Ehisj Hskjdf Hoiej',
          site: '美国 加利福利亚州 米尔艾范德萨',
          url: 'https://www.baidu.com',
          tag1: ['HIC','ACD/CVD',"C++/JAVA/JAVASCRIPT/PHTYHON/CAD","UFC/UFS"],
          tag2: ['dfslkajllsf skdfjds', 'derver']
        },
        {
          id: 3,
          img: 'https://img1.baidu.com/it/u=1667464648,359671784&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667',
          name: 'MEE Hao',
          nameDetail: 'Ehisj Hskjdf Hoiej',
          site: '美国 加利福利亚州 米尔艾范德萨',
          url: 'https://www.baidu.com',
          tag1: ['HIC','ACD/CVD',"C++/JAVA/JAVASCRIPT/PHTYHON/CAD","UFC/UFS"],
          tag2: ['dfslkajllsf skdfjds', 'derver']
        },
        {
          id: 4,
          img: 'https://img1.baidu.com/it/u=757598931,806605600&fm=26&fmt=auto&gp=0.jpg',
          name: 'MEE Hao',
          nameDetail: 'Ehisj Hskjdf Hoiej',
          site: '美国 加利福利亚州 米尔艾范德萨',
          url: 'https://www.baidu.com',
          tag1: ['HIC','ACD/CVD',"C++/JAVA/JAVASCRIPT/PHTYHON/CAD","UFC/UFS"],
          tag2: ['dfslkajllsf skdfjds', 'derver']
        },
      ],
      options: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }, {
        value: 'JavaScript',
        label: 'JavaScript'
      }],
      value: []
    }
  },
  mounted() {
    this.enrollmentYear();
  },
  methods:{
    enrollmentYear() {
      const myChart = this.$echarts.init(document.getElementById('enrollmentYear'));
      const option = {
          grid: {
              top:"0px",
              left:"2px",
              right:"2px",
              bottom:"0px"
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              axisTick: {
                  show: false,
              },
          },
          yAxis: {
              type: 'value',
              show: false
          },
          series: [{
              data: [10, 20, 30, 100, 123, 149, 170,500,539,123,10],
              type: 'line',
              smooth: true,
              areaStyle: {
                  color: '#e4e4e4',
              },
              color: '#0883fe',
              showSymbol: false,
          }]
      };
      myChart.setOption(option);
    },
    handelSelect(value) {
      console.log('value',value);
      console.log('this.value', this.value);
      console.log('options', this.options);
    },
    handleClose(tag,name) {
      console.log('tag',tag);
      switch (name) {
        case 'name':
          this.nameArray.splice(this.nameArray.indexOf(tag), 1);
          break;

        case 'location':
          this.locationArray.splice(this.locationArray.indexOf(tag), 1);
          break;

        case 'company':
          this.companyArray.splice(this.companyArray.indexOf(tag), 1);
          break;

        case 'industryChain':
          this.industryChainArray.splice(this.industryChainArray.indexOf(tag), 1);
          break;

        case 'skillsLabel':
          this.skillsLabelArray.splice(this.skillsLabelArray.indexOf(tag), 1);
          break;

        case 'education':
          this.educationArray.splice(this.educationArray.indexOf(tag), 1);
          break;

        case 'williamsCollege':
          this.williamsCollegeArray.splice(this.williamsCollegeArray.indexOf(tag), 1);
          break;
      
        default:
          break;
      }
    },
    // 高级搜索名字
    handleNameText() {
      this.nameVisible = false;
      this.$nextTick(() => {
        this.$refs.nameInput.focus();
      })
    },
    handleNameInput() {
      this.nameVisible = true;
      if(this.nameInput.trim() !== '') {
        this.nameArray.push(this.nameInput);
      }
      this.nameInput = '';
      this.nameArray = [...new Set(this.nameArray)];
    },
    // 高级搜索所在地
    handleLocationText() {
      this.locationVisible = false;
      this.$nextTick(() => {
        this.$refs.locationInput.focus();
      })
    },
    handleLocationInput() {
      this.locationVisible = true;
      if(this.locationInput.trim() !== '') {
        this.locationArray.push(this.locationInput);
      }
      this.locationInput = '';
      this.locationArray = [...new Set(this.locationArray)];
    },
    // 高级搜索就职公司
    handleCompanyText() {
      this.companyVisible = false;
      this.$nextTick(() => {
        this.$refs.companyInput.focus();
      })
    },
    handleCompanyInput() {
      this.companyVisible = true;
      if(this.companyInput.trim() !== '') {
        this.companyArray.push(this.companyInput);
      }
      this.companyInput = '';
      this.companyArray = [...new Set(this.companyArray)];
    },
    // 高级搜索产业链环节
    handleIndustryChainText() {
      this.industryChainVisible = false;
      this.$nextTick(() => {
        this.$refs.industryChainInput.focus();
      })
    },
    handleIndustryChainInput() {
      this.industryChainVisible = true;
      if(this.industryChainInput.trim() !== '') {
        this.industryChainArray.push(this.industryChainInput);
      }
      this.industryChainInput = '';
      this.industryChainArray = [...new Set(this.industryChainArray)];
    },
    // 高级搜索技能标签
    handleSkillsLabelText() {
      this.skillsLabelVisible = false;
      this.$nextTick(() => {
        this.$refs.skillsLabelInput.focus();
      })
    },
    handleSkillsLabelInput() {
      this.skillsLabelVisible = true;
      if(this.skillsLabelInput.trim() !== '') {
        this.skillsLabelArray.push(this.skillsLabelInput);
      }
      this.skillsLabelInput = '';
      this.skillsLabelArray = [...new Set(this.skillsLabelArray)];
    },
    // 高级搜索最高学历
    handleEducationText() {
      this.educationVisible = false;
      this.$nextTick(() => {
        this.$refs.educationInput.focus();
      })
    },
    handleEducationInput() {
      this.educationVisible = true;
      if(this.educationInput.trim() !== '') {
        this.educationArray.push(this.educationInput);
      }
      this.educationInput = '';
      this.educationArray = [...new Set(this.educationArray)];
    },
    // 高级搜索毕业院校
    handleWilliamsCollegeText() {
      this.williamsCollegeVisible = false;
      this.$nextTick(() => {
        this.$refs.williamsCollegeInput.focus();
      })
    },
    handleWilliamsCollegeInput() {
      this.williamsCollegeVisible = true;
      if(this.williamsCollegeInput.trim() !== '') {
        this.williamsCollegeArray.push(this.williamsCollegeInput);
      }
      this.williamsCollegeInput = '';
      this.williamsCollegeArray = [...new Set(this.williamsCollegeArray)];
    },
    // 所在地搜索
    handleLocation(val) {
      console.log('所在地搜索', val);
    },
    // 领域搜索
    handleTerritory(val) {
      console.log('领域搜索', val);
    },
    // 出生年份搜索
    handlerYear(val) {
      console.log('出生年份搜索', val);
    },
    // 最高学历搜索
    handleEducationBackground(val) {
      console.log('最高学历搜索', val);
    },
    // 跳转人物详情
    handleDetail(id) {
      this.$router.push({
        path: '/CharacterDetail',
        query: {id}
      })
    },
    // 分页
    handleCurrentChange(page) {
      console.log('分页',page);
    }
  },
}
</script>
<style lang="less">
.SearchPage {
  height: 100%;
  .el-dialog {
    background-color: #f8f8f8;
    .el-dialog__body {
      padding-top: 0;
    }
  }
  .SearchBody {
    .advancedSearch {
      border-right: 1px solid #f0f0f0;
      margin-right: 20px;
      >p {
        line-height: 45px;
        margin-top: 10px;
        font-size: 15px;
      }
    }
    .el-input__inner:hover {
      border-color: #1890ff;
    }
    .btn {
      color: #FFF !important;
      background-color: #1890ff !important;
      border-color: #1890ff !important;
      border-radius:  0 4px 4px 0;
      line-height: 1.1;
    }
    .el-tabs__nav-wrap::after {
      width: 0px;
      height: 0px;
    }
    .talentsUl {
      margin-top: 10px;
      color: #6c6c6c;
      >li {
        width: 80%;
        border-bottom:
        2px dashed #eeeeee;
        line-height: 50px;
        >span {
          display: inline-block;
          width: 60px;
          text-align: right;
        }
        >.el-button--text {
          color: #6c6c6c;
          margin: 0 15px;
          &:hover {
            color: #409EFF;
          }
          >span >span {
            color: #409EFF;
          }
        }
      }
    }
    .CharacterUl {
      >li {
        margin-bottom: 20px;
        .detailLeft {
          cursor: pointer;
          display: inline-block;
          width: 80px;
          height: 80px;
          vertical-align: top;
          background-size: cover ;
          border-radius: 50%;
        }
        .detailRight {
          display: inline-block;
          margin-left: 20px;
          color: #8c8c8c;
          >p {
            margin-bottom: 10px;
          }
          >div {
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
</style>